<template>
  <flexbox :gutter="gutter" align="stretch" class="wk-base-detail-section" wrap="wrap">
    <el-table :data="tableList" style="width: 100%" v-if="list.length > 0">
      <el-table-column v-for="(o, key, i) in tableList[0]" :key="i" :prop="key" :label="key">
        <template slot-scope="scope">
          <div v-html="scope.row[key]"></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-dropdown v-if="dropdownItems && dropdownItems.length > 0" trigger="hover"
            @command="handleTypeClick($event, scope.$index)">
            <i style="cursor: pointer;" class="el-icon-more" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in dropdownItems" :key="index" :icon="item.icon"
                :command="item.command">{{ item.label }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown></template>
      </el-table-column>
    </el-table>
    <slot />
  </flexbox>
</template>

<script>

export default {
  name: 'WkBaseDetailTable',
  components: {},
  props: {
    list: Array,
    type: String,
    gutter: {
      type: Number,
      default: 0
    },
    dropdownItems: Array
  },
  data() {
    return {
      tableList: []
    }
  },
  computed: {
  },
  watch: {
    list: {
      deep: true,
      handler(val) {
        if (val.length > 0) {
          this.tableList = []
          val.forEach(item => {
            let obj = {}
            item.forEach(o => {
              obj[o.label] = o.value
            })
            this.tableList.push(obj)
          })
        }
      },
    }
  },
  mounted() {
    if (this.list.length > 0) {
      this.tableList = []
      this.list.forEach(item => {
        let obj = {}
        item.forEach(o => {
          obj[o.label] = o.value
        })
        this.tableList.push(obj)
      })
    }
  },

  beforeDestroy() { },
  methods: {
    handleTypeClick(type, index) {
      this.$emit('command-select', type, this.type, index)
    }
  }
}
</script>

<style lang="scss" scoped>
.wk-base-detail-section {
  position: relative;

  &__item {
    width: auto;
    padding: 8px;

    .item-name {
      padding-bottom: 4px;
      line-height: 1.5;
      color: #6b778c;
      word-break: break-all;
      word-wrap: break-word;
    }

    .item-value {
      position: relative;
      min-height: 32px;
      padding: 3px 6px;
      overflow: hidden;
      line-height: 1.5;
      text-overflow: ellipsis;
      background-color: #ebecf0;
      border: 2px solid #dfe1e6;
      border-radius: 3px;
    }
  }

  &__more {
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>
